import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import {Menu, Dropdown} from 'antd';

@inject('sysFavouriteStore','myFavouriteStore')
@observer
export default class ItemLevel extends Component {
    handleMouseOver = () => {
        const {sysFavouriteStore} = this.props;
        const itemid = this.props.favid;
        sysFavouriteStore.setLevelOver(itemid, true);
    }

    handleMouseOut = () => {
        const {sysFavouriteStore} = this.props;
        const itemid = this.props.favid;
        sysFavouriteStore.setLevelOver(itemid, false);
    }

    /**
     * 重要程序选中一个，即修改重要程度
     * @param obj
     */
    onLevelMenuSelect = (obj) => {
        const {sysFavouriteStore, favid} = this.props;
        const importlevel = obj.key;
        sysFavouriteStore.changeLevel(favid, importlevel);
    }

    renderLevelMenu = () => {
        const {myFavouriteStore} = this.props;
        const {favTypeMap} = myFavouriteStore;

        let btn1 = null,
            btn2 = null,
            btn3 = null,
            key = null;
        for (key in favTypeMap) {
            const value = favTypeMap[key];
            if (key == '1') { // 一般
                btn1 = (
                    <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_menuItem@6k7c4d`} key={key}>
                        <div className="sysfav-level-menu-common sysfav-level-menu-normal">
                            <div className="icon"/>
                            <div className="text">{value}</div>
                        </div>
                    </Menu.Item>
                );
            } else if (key == '2') { // 关注
                btn2 = (
                    <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_menuItem@7ohoyf`} key={key}>
                        <div className="sysfav-level-menu-common sysfav-level-menu-middle">
                            <div className="icon"/>
                            <div className="text">{value}</div>
                        </div>
                    </Menu.Item>
                );
            } else if (key == '3') { // 重要
                btn3 = (
                    <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_menuItem@bcxbld`} key={key}>
                        <div className="sysfav-level-menu-common sysfav-level-menu-important">
                            <div className="icon"/>
                            <div className="text">{value}</div>
                        </div>
                    </Menu.Item>
                );
            }
        }
        return [btn3, btn2, btn1];
    }

    render() {
        let cls1 = '';
        let cls2 = '';
        const {importantLevel, isover, importtext} = this.props;
        if (importantLevel == 3) { // 重要
            cls2 = 'important';
        } else if (importantLevel == 2) { // 关注
            cls2 = 'middle';
        } else {
            cls2 = 'normal';
        }

        const {islevelover} = this.props;
        let cls3 = '';
        if (islevelover) {
            cls3 = 'over';
        }

        const menu = (
            <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@2cj9kp`} onSelect={this.onLevelMenuSelect}>
                {this.renderLevelMenu()}
            </Menu>
        );

        return (
            <Dropdown
                ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@xwb1xw`}
                overlay={menu}
                trigger={['hover']}
            >
                <div
                    className={`common sysfav-list-item-info-level ${cls1}`}
                    //onMouseOver={this.handleMouseOver}
                    //onMouseOut={this.handleMouseOut}
                    ecId={`${this && this.props && this.props.ecId || ''}`}
                >
                    <div className={`text ${cls2}`}>
              <span
                  style={{'text-overflow': 'ellipsis', overflow: 'hidden', 'word-break': 'normal'}}
                  title={importtext}
                  className={cls3}
              >
                  {importtext}
              </span>
                    </div>
                </div>
            </Dropdown>
        );
    }
}
